<script lang="ts">
    import { useClassList } from "../utils/useClassList";
    import { useStyle } from "../utils/useStyle";
    import type { SkeletonParagraphProps } from "./Skeleton";

    const props: SkeletonParagraphProps = $props();
    const rows = props.rows ?? 4;
    const classList = $derived(useClassList(props, "cm-skeleton-paragraph"));
    const arr = new Array(rows).fill(1);
    const outStyle = $derived(useStyle(props, {}));
</script>

<ul class={classList} style={outStyle}>
    {#each arr as item, index (index)}
        {@const style = `width: ${props.width instanceof Array ? props.width[index] : ""} `}
        <li {style}></li>
    {/each}
</ul>
